import React from 'react';
import { Table } from 'antd';
import { Link }  from 'umi';
import Statistic from './components/statistic';
import SjxlChart from './components/echart/SjxlChart';

const Sjxlfx = ({ data }) => {
    const { tableDataList = [], recruitAvgPeriod = '--', industryReferenceValue = '--', stepDataList = [] } = data;
    const columns = [
        {
            title: '环节',
            dataIndex: 'name'
        },
        {
            title: '平均/天',
            dataIndex: 'avgNum'
        },
        {
            title: '最长/天',
            dataIndex: 'longestNum',
            render: (text, record) => (
                <Link
                    to={{
                        pathname: '/office/personnelManagement/recruit/candidate',
                        query: { candidateName: record.userName }
                    }}
                >
                    {text}
                </Link>
            )
        }
    ];
    return (
        <div>
            <Statistic
                title="时间效率分析"
                data={{
                    top: '平均招聘周期',
                    center: (
                        <span>
                            <strong>{recruitAvgPeriod}</strong>天
                        </span>
                    ),
                    bottom: <span>业界参考值：{industryReferenceValue}天</span>
                }}
            />
            <SjxlChart data={stepDataList} />
            <Table size="small" columns={columns} dataSource={tableDataList} pagination={false} bordered />
        </div>
    );
};

export default Sjxlfx;
